/**
 * @description: 商品渠道页面
 * @author:zx
 */

import { useState, useRef } from 'react';
import GoodsSearch from './GoodsSearch';
import SmartSetChannel from './SmartSetChannel';
import GoodsList from './GoodsList';
import { Alert } from 'antd';
import moment from 'moment';
import { renderRoleType } from '@/utils/utils.jsx';

//获取用户角色类型
const roleType = renderRoleType();

export default () => {

	//查询条件
	const [query, setQuery] = useState({
		deliverType: '3'
	});

	const divEl = useRef(null);

	//数据需要缓存，根据当前时间
	const [updateTime, setUpdateTime] = useState(moment(new Date()).format('YYYY-MM-DD HH:mm:ss'));

	// 搜索组件数据
	const GoodsSearchProps = {
		query,
		roleType,
		handleSearch(val) {
			setQuery(val);
			setUpdateTime(moment(new Date()).format('YYYY-MM-DD HH:mm:ss'));
		},
		handleReset() {
			setQuery({ deliverType: '3' });
			setUpdateTime(moment(new Date()).format('YYYY-MM-DD HH:mm:ss'));
		},
		handleGoodsTypeChange(val) {
			setQuery({ ...query, deliverType: val });
			setUpdateTime(moment(new Date()).format('YYYY-MM-DD HH:mm:ss'));
		}
	};

	//初始化智能设置
	const SmartSetChannelProps = {
		query
	}


	//列表组件数据
	const GoodsListProps = {
		divEl,
		query,
		roleType,
		updateTime,
	};

	return (
		<>
			<div ref={divEl}>
				<GoodsSearch {...GoodsSearchProps} />
				<Alert type="info" style={{ margin: '12px 0' }} message="订单会根据列表里每个商品所属的发货渠道，然后自动匹配发货渠道" />
				{['1', '2', '3'].includes(query.deliverType) && <SmartSetChannel {...SmartSetChannelProps} />}
			</div>
			<GoodsList {...GoodsListProps} />
		</>
	);
};
